<template>
    <div class="folder">
        <div class="folder-name" :class="{ isSelect: props.folder.id == SelectId }" @click="ClickEvent"
            :style="{ paddingLeft: (props.level + 1) * 10 + 'px' }">
            <div class="swith" @click.stop="state = !state">
                <div class="border" :class="{ active: state }"></div>
            </div>
            <img v-if="state" src="./folder-o.svg" alt="">
            <img v-else src="./folder-c.svg" alt="">
            <span :title="props.folder.name">{{ props.folder.name }}</span>
        </div>
        <div class="folder-children" v-if="state">
            <folder :folder="item" :level="props.level + 1" v-for="item in props.folder.children"></folder>
        </div>
    </div>
</template>
<script setup>
import { inject, ref } from 'vue';
import folder from './folder.vue'
const props = defineProps(['folder', 'level']);
const state = ref(true);
const GetFilterContent = inject('GetFilterContent');
const SelectId = inject('SelectId');

const ClickEvent = function () {
    GetFilterContent(props.folder.handle, props.folder.id);
    state.value = true;
}
</script>
<style lang="less" scoped>
.swith {
    width: 30px;
    flex: none;
    margin: -6px 0px -6px -6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.border {
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 13px solid #fff;
    transform: scale(0.7);

    &.active {
        transform: scale(0.7) rotateZ(90deg);
    }
}


.folder-name {
    display: flex;
    white-space: nowrap;
    padding: 6px 0;
    width: 100%;
    overflow: hidden;
    cursor: pointer;

    &.isSelect {
        background-color: rgba(100, 100, 100, 0.3);
    }

    img {
        width: 16px;
        display: block;

        margin-left: 8px;
        margin-right: 10px;
    }
}
</style>